import React, { useState, useEffect } from "react";
import MyTabbar from "@/components/MyTabbar";
import HomeHeader from "./components/HomeHeader";
import axios from "@/utils/request";
import type { Banner } from "./type";
import { Swiper, Grid } from "antd-mobile";
import styles from "./style.less";
import { useNavigate } from "umi";
import InfiniteScroll from "react-infinite-scroll-component";
export default function index() {
  const navigate = useNavigate();
  // 轮播数据
  const [banners, setBanners] = useState<Banner[]>([]);
  const getBanners = () => {
    axios.get("/banner/list").then((res) => {
      if (res.data.code === 0) {
        setBanners(res.data.data);
      }
    });
  };
  // 分类数据
  const [cates, setCates] = useState<CateType[]>([]);
  const getCates = () => {
    axios.get("/shop/goods/category/all").then((res) => {
      if (res.data.code === 0) {
        setCates(res.data.data);
      }
    });
  };

  // 商品列表数据
  const [page, setPage] = useState(1);
  const pageSize = 5;
  const [items, setItems] = useState<ItemType[]>([]);
  const getItems = () => {
    axios
      .post("/shop/goods/list/v2", {
        page,
        pageSize,
      })
      .then((res) => {
        if (res.data.code === 0) {
          setItems([
            ...items,
            ...res.data.data.result
          ]);
        }
        if (res.data.code === 700) {
          setHasMore(false)
        }
      });
  };
  // 是否还有更多数据
  const [hasMore, setHasMore] = useState(true);

  // 上拉加载 触底事件
  const reactBottom = () => {
    setPage(page + 1);
  };

  useEffect(() => {
    getItems();
  }, [page]);


  useEffect(() => {
    getBanners();
    getCates();
  }, []);

  // 跳转到详情
  const enterDetail = (id: number) => {
    navigate(`/detail/${id}`);
  };
  // 跳转到商品列表
  const enterLists = (cateId: number) => {
    navigate("/itemLists?cateId=" + cateId);
  };
  return (
    <>
      <HomeHeader />
      <div className={styles["home-container"]}>
        {/* 轮播 */}
        <Swiper autoplay loop>
          {banners.map((banner: Banner) => (
            <Swiper.Item key={banner.id}>
              <img src={banner.picUrl} alt="" />
            </Swiper.Item>
          ))}
        </Swiper>
        {/* /轮播 */}
        {/* 宫格导航 */}
        <Grid columns={3} gap={8}>
          {cates.map((cate: CateType) => (
            <Grid.Item
              onClick={() => {
                enterLists(cate.id);
              }}
              key={cate.id}
            >
              <img src={cate.icon} alt="" />
              <span>{cate.name}</span>
            </Grid.Item>
          ))}
        </Grid>
        {/* /宫格导航 */}
        {/* 商品列表 */}
        <InfiniteScroll
          dataLength={items.length}
          next={reactBottom}
          hasMore={hasMore}
          loader={<h4>加载中...</h4>}
          endMessage={
            <p style={{ textAlign: "center" }}>
              <b>--我也是有底线的--</b>
            </p>
          }
        >
          <div className="items">
            {items.map((item: ItemType) => (
              <div
                className="item"
                onClick={() => {
                  enterDetail(item.id);
                }}
                key={item.id}
              >
                <img src={item.pic} alt="" className="item-img" />
                <div className="item-info">
                  <h5>{item.name}</h5>
                  <p className="price">{item.minPrice}</p>
                </div>
              </div>
            ))}
          </div>
        </InfiniteScroll>
        {/* /商品列表 */}
      </div>
      <MyTabbar />
    </>
  );
}
